// 引入矢量图样式
require("../../iconfont/iconfont.css");
require("../../iconfont/font1/iconfont.css");

// 引入公共样式
require('../../assets/css/css.less')

// 引入css样式
require('./play.less')

// 获取axios工具函数
const request = require('../../utils/request')

// 

window.onload = () => {
    // 服务器地址
    const API = "http://fitness.h5.itsource.cn:3701";
    // 获取dom
    const player = document.querySelector('#player');
    const curIndex = document.querySelector('#curIndex');
    const totalLength = document.querySelector('#totalLength');
    const title = document.querySelector('#title');
    const pre = document.querySelector('#pre');
    const pause = document.querySelector('#pause');
    const next = document.querySelector('#next');
    const play1 = document.querySelector('#play1');
    const progress = document.querySelector('#progress')
    const popup = document.querySelector('.popup')
    const go_on = document.querySelector('.go-on')
    const end = document.querySelector('.end')
    const item = document.querySelector('.item')
    const image = document.querySelector('#image')
    // 获取本地数据
    const fragments = JSON.parse(localStorage.getItem('fragments'))
    console.log(fragments);
    // 


    // 设置变量
    let index = 0;//初始化播放的索引
    let length = fragments.length;//视频总个数
    let timeList = [];//用于保存所有运动时间
    let time = 0;//记录当前时间
    // 播放
    function play() {
        // 给视频src赋值
        player.src = API + fragments[index].videoUrl;
        // 信息赋值
        curIndex.textContent = index + 1;
        totalLength.textContent = length;
        title.textContent = fragments[index].title;
        item.textContent = fragments[index].title;
        image.src = API + fragments[index].imgUrl;


        // 监听播放器 能播再播放
        player.addEventListener('canplay', () => {
            // 播放
            player.play()
        })

    }
    // 初始化播放
    play()



    // 下一曲
    next.addEventListener('click', () => {
        if (index < length - 1) {
            // 索引+1
            index++
        } else {
            index = 0;
        }
        // 播放器播放下一曲
        play()
        play1.style.display = 'none';
        pause.style.display = 'block';
        // 把下一曲的时间存入数组
        timeList.push(time);
    })

    // 上一曲
    pre.addEventListener('click', () => {
        if (index > 0) {
            // 索引+1
            index--
        } else {
            index = length - 1;
        }
        // 播放器播放上一曲
        play()
        play1.style.display = 'none';
        pause.style.display = 'block';
        // 把上一曲的时间存入数组
        timeList.push(time);
    })

    // 暂停
    pause.addEventListener('click', function () {
        player.pause()
        pause.style.display = 'none';
        play1.style.display = 'block';
        popup.style.display = 'block';
    })
    // 播放
    play1.addEventListener('click', function () {
        player.play()
        play1.style.display = 'none';
        pause.style.display = 'block';

    })

    // 结束时暂停
    player.addEventListener('ended', () => {
        // pause.style.display='none';
        // play1.style.display='block';
        next.click()
    })
    // 添加一个timeupdate事件
    player.addEventListener('timeupdate', function () {
        // console.log(player.currentTime/player.duration);
        // 获取当前时间 百分比
        const percent = player.currentTime / player.duration
        // 计算进度条的长度
        progress.style.width = percent * 100 + '%';
        // 把当前时间记录在time里面
        time = player.currentTime;
    })

    // 点击弹窗中的继续训练，播放视频
    go_on.addEventListener('click', () => {
        popup.style.display = 'none';
        player.play();
        play1.style.display = 'none';
        pause.style.display = 'block';
    })

    // 点击弹窗中的结束训练
    end.addEventListener('click', function () {
        popup.style.display = 'none';
        player.pause();
        
        // 把结束时记录的时间存入数组
        timeList.push(time);
        console.log(timeList);

        let res = timeList.reduce((total, cur) => {
            return total + cur
        }, 0)

        request.post('/api/exercise/save', {
            type: 2,
            duration: res,
            calorie: res * 1000,
        }).then(res=>{
            // console.log('res:',res.data);
            if(res.data.errno===0){
                location.href='./courseTrain.html';
            }
        })
    })




    // 

}